<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <link rel="stylesheet" href="css/main.css" />
  <link rel="stylesheet" href="css/seek.css" />
  <script src="js/flexible.min.js"></script>
</head>

<body>
  <div class="main" id="seek" v-cloak>
    <div class="text-list">
      <p v-for="item in text_list" class="text">{{item.text}}</p>
    </div>
    <div class="seek-box">
      <div class="seek-input">
        <input type="text" placeholder="请输入搜索内容" v-model="seek_cen"
          @keyup.enter="seekFn('/search/name?size=10000&name='+seek_cen)" />
        <em class="cancel" @click="seek_cen=''" v-if="seek_cen!==''">
          <img src="img/gb.png" alt="" />
        </em>
      </div>
      <button class="button" @click="seekFn('/search/name?size=10000&name='+seek_cen)">
        搜索
      </button>
    </div>
    <div class="center" ref="center_ref" @scroll="scrollFn">
      <div class="tab-list">
        <div class="item-box">
          <button v-for="(item,index) in data_list" :key="index" class="item" @click="tabClick(index,item)">
            {{item.title}}
          </button>
        </div>
      </div>
      <div class="seek-content">
        <div class="data-list" v-for="(data,index) in data_list" :key="index" :id="'data'+index">
          <h1 class="title">{{data.title}}</h1>
          <div class="item" v-for="(item,i) in data.game_list" :key="index+'_'+i">
            <p class="name">{{item.title}}</p>
            <p class="desc">{{item.desc}}</p>
          </div>
          <p class="no-data" v-if="!data.game_list.length">该分类暂无数据</p>
        </div>
      </div>
    </div>
    <img src="./img/top.png" alt="" class="return-top" @click="returnTop" v-if="show_top">
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script>
  new Vue({
    el: '#seek',
    data: {
      url: 'api.php',
      seek_cen: '',
      data_list: [],
      show_top: false,
      text_list: []
    },
    mounted() {
      this.gameListFn()
      this.getTextFn()
    },
    methods: {
      // 获取公告列表
      getTextFn() {
        axios.post(this.url + '/game/get_text', { keyword: this.seek_cen }).then((s) => {
          console.log(s)
          this.text_list = s.data.data
        }).catch(function (error) {
          // 请求失败处理
          console.log(error)
        })
      },
      // 获取游戏列表
      gameListFn() {
        axios.post(this.url + '/game/get_list', { keyword: this.seek_cen }).then((s) => {
          console.log(s)
          this.data_list = s.data.data
        }).catch(function (error) {
          // 请求失败处理
          console.log(error)
        })
      },
      tabClick(index, url) {
        window.location.href = `#data${index}`
      },
      seekFn(url) {
        this.gameListFn(url)
      },
      returnTop() {
        this.$refs.center_ref.scrollTop = 0;
      },
      scrollFn(e) {
        if (this.$refs.center_ref.scrollTop > 200) {
          this.show_top = true
        } else {
          this.show_top = false
        }
        console.log(this.$refs.center_ref.scrollTop)
      }
    },
  })
</script>

</html>